<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="assets/layui/css/layui.css" media="all"/>
		<script src="./js/ajax/api.js"></script>
		<script src="./assets/axios/node_modules/axios/dist/axios.js"></script>
	</head>
	<body>
		<style>
		    .table_height{
		        height:100%;
		    }
		    .table_class{
		        background-color:#1AA094;
		    }
		    .show :hover a{
		        display:block;
		    }
		</style>
		<div class="layui-layout layui-layout-admin">
		    <div class="layui-header layui-row " style="color:black; background-color:white">
		        <div style="color:black ;height:100%;width:10%;text-align:center;line-height:2;font-size:2em" class="">
		            Logo
		        </div>
		        <div class="layui-logo layui-col-lg-offset1 layui-clear" style="">
		            <i id="sideTig" class="layui-icon layui-icon-shrink-right" style="font-size: 2em; color:white;background-color:#1E9FFF;padding:3px"></i>
		        </div>
		
		
		        <!-- 头部区域（可配合layui已有的水平导航） -->
		
		        <ul class="layui-nav  layui-layout-right">
		            
		            <li class="layui-nav-item show" style="color:black">
		               
		            </li>
		            <li class="layui-nav-item"><a href="javascript:" style="color:black;" onclick="OutSystem()">退出登录</a></li>
		        </ul>
		    </div>
		    <div id="divSide" class="layui-side layui-bg-black" style="border-right:solid 2px #5EB95E">
		        <div class="layui-side-scroll">
		            <div style="width:100%;height:5px;background-color:#5EB95E"></div>
		            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
		            <ul class="layui-nav layui-nav-tree layui-icon " lay-filter="test" lay-shrink="all">
		                <li class="layui-nav-item layui-nav-itemed">
		                    <a class=" " href="javascript:;"><in class="layui-icon-user" style="padding:6px;margin-right:4px"></in>学生</a>
		                    <dl class="layui-nav-child">
		                        <dd><a href="javascript:;" data-type="1" data-url="view/user/teacher/student.html"><in class="layui-icon-set" style="padding:6px;margin-right:4px"></in>学生管理</a></dd>
		             
		
		                    </dl>
		                </li>
		                <li class="layui-nav-item">
		                    <a class=" " href="javascript:;"><in class="layui-icon-template-1" style="padding:6px;margin-right:4px"></in>试卷</a>
		                    <dl class="layui-nav-child">
		                        <dd><a href="javascript:;" data-type="2" data-url="view/user/teacher/testpaper.html"><in class="layui-icon-read" style="padding:6px;margin-right:4px"></in>试卷管理</a></dd>
		                        <dd><a href="javascript:;" data-type="3" data-url="view/user/teacher/checkpaper.html"><in class="layui-icon-survey" style="padding:6px;margin-right:4px"></in>审卷</a></dd>
		
		                    </dl>
		                </li>

		            </ul>
		        </div>
		    </div>
		
		    <div id="sideContent" class="layui-body " style="overflow:hidden;padding:0px;margin:0px;border-top:solid 5px #5EB95E;height:100%" >
		        <div class="layui-tab layui-row layui-layout" lay-filter="demo" lay-allowclose="true" style="margin:0px;width:100%;height:100%;padding:0px;">
		            
		            <ul class="layui-tab-title layui-icon layui-col-lg12" style="border-bottom:solid 1px #5EB95E;height:43.5px">
		                <li class="layui-this table_class" lay-id="0"  style="height:44px">用户信息</li>
		            </ul>
		            <ul class="layui-nav  layui-layout-right rightmenu" style="margin-top:-5px;height:47px;background-color:white" >
		                <li class="layui-nav-item" style="background-color:#5EB95E;height:100%"><a href="javascript:" style="color:black;" data-type="refresh">刷新</a></li>
		                <li class="layui-nav-item" style="height:100%;">
		                    <a href="javascript:;" style="color:black;">
		                        导航管理
		                    </a>
		                    <dl class="layui-nav-child " >
		                        <dd><a href="javascript:;" style="color:black;" data-type="closeOthers">关闭其它</a></dd>
		                        <dd><a href="javascript:;" style="color:black;" data-type="closeOpen">关闭当前</a></dd>
		                        <dd><a href="javascript:;" style="color:black;" data-type="closeAll">关闭所有</a></dd>
		                    </dl>
		                </li>
		            </ul>
		            <div class="layui-tab-content" style="height:100%" >
		                <div class="layui-tab-item layui-show" style="height: 100%">
		                    <iframe src="view/person.html" frameborder="0" id="demoAdmin" style="width:100%;height:100%"></iframe>
		                </div>
		            </div>
		        </div>
		    </div>
		    <div class="layui-footer">
		        <!-- 底部固定区域 -->
		        © 星梦工作室所有 曾东明 周庆连 刘益斌
		    </div>
		</div>
		<script src="js/jquery-3.4.1.js"></script>
		<script src="assets/layui/layui.js"></script>
		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			try {
				let user = JSON.parse(localStorage.getItem("user"));
				if(user.userType==0){
					location.href="./main.html"
				}
			}catch (e) {
				console.log(e)
			}

		    layui.use(['element', 'jquery'], function () {
		        var tablelegth=0;
		        var $ = layui.jquery
		            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
		        //
				api.get("User/api/User/UserInfo").then(res=>{
					console.log(res)
					if(res.status){
						localStorage.setItem("user",JSON.stringify(res.data[0]))
					}else{
						// window.location.href="./login.html"
					}
					// $(".show").text("欢迎:"+obj.data.UserID+"老师使用");
				}).catch(res=>{

				})

		
		        
		        //触发事件
		        var active = {
		            tabAdd: function () {
		                //新增一个Tab项
		                element.tabAdd('demo', {
		                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
		                    , content: '内容' + (Math.random() * 1000 | 0)
		                    , id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
		                })
		            }
		            , tabDelete: function (othis) {
		                //删除指定Tab项
		                // console.log(othis);
		                element.tabDelete('demo', '44'); //删除：“商品管理”
		
		            }
		            , tabChange: function () {
		                //切换到指定Tab项
		                element.tabChange('demo', '22'); //切换到：用户管理
		            },
					tabRefresh: function (nav,dataid) {
						//切换到指定Tab项
						// console.log(nav,dataid);
						// element.render(nav,dataid); //刷新
						element.init('tab');
					}

		        };
		
		        $('.site-demo-active').on('click', function () {
		            var othis = $(this), type = othis.data('type');
		            active[type] ? active[type].call(this, othis) : '';
		
		        });
		        //table的id
		
		
		        var isture;//保存当前点击的id
		        element.on('tab(demo)', function (elem) {
		            //监听table中的切换事件
		            //1.添加样式颜色
		            $(this).addClass("table_class");
		            //移除其他的样式
		            $(this).siblings("li").removeClass("table_class");
		            //
		            isture = this.getAttribute('lay-id');
		            tableID = isture;//保存当前显示的tableid
		
		        });
		        //默认显示
		        var tableID = '22';//保存当前的id显示表格的id
		        element.tabChange('demo', tableID);
		        //左边的导航的相事件
		        element.on('nav(test)', function (elem) {
		            if (this.getAttribute("data-url") != null) {
		                //必须要有url否则不进来
		                element.tabChange('demo', this.getAttribute('data-type'))
		                //点击右边的的导航判断是否存在table
		                //如果有跳到那里去然后不进行生成新的表格
		                if (isture != this.getAttribute('data-type')) {
		                    //判断当前的id与table的id不同则创建
		
		                    element.tabAdd('demo', {
		                        title: this.innerHTML //用于演示
		                        , content: '<iframe src="' + this.getAttribute("data-url") + '" frameborder="0" id="demoAdmin" style="width:100%;height:100%"></iframe>'
		                        , id: this.getAttribute('data-type') //实际使用一般是规定好的id，这里以时间戳模拟下
		                    })
		                    
		                    element.tabChange('demo',this.getAttribute('data-type'))
		                    tableID = this.getAttribute('data-type');
		                    $(".layui-show").height('100%');
		                    $(".layui-this").height(44);
		
		                }
		
		                //if ((element.tabChange('demo', this.innerHTML)).getAttribute('lay-id') == this.innerHTML) {
		                //    alert('');
		                //}
		
		            }
		
		        });
		        // $(".rightmenu li dl dd a").click(function () {
				$("ul.rightmenu  li a").click(function () {
		            //当前的tabId
					// console.log($(this))
		
		            if ($(this).attr("data-type") == "closeOthers") { //关闭其他
		                var tabtitle = $(".layui-tab-title li");
		
		                $.each(tabtitle, function (i) {
		
		                    if ($(this).attr("lay-id") != tableID) {
		                    	// console.log($(this).attr("lay-id"))
		                        element.tabDelete('demo',$(this).attr("lay-id"));
		                    }
		                })
		            } else if ($(this).attr("data-type") == "closeAll") { //关闭全部
		                var tabtitle = $(".layui-tab-title li");
		
		                $.each(tabtitle, function (i) {
		                    // console.log(this);
		                    element.tabDelete('demo',$(this).attr("lay-id"))
		                })
		
		            } else if ($(this).attr("data-type") == "refresh") { //刷新页面
						var tabtitle = $(".layui-tab-title li");

						$.each(tabtitle, function (i) {
							// console.log(i)
							// console.log($(this))
							if ($(this).attr("lay-id") == tableID) {
								active.tabRefresh('demo',$(this).attr("lay-id"));

							}
						})


		
		            } else if ($(this).attr("data-type") == "closeOpen") {
		                //关闭右边所有
		                //找到当前聚焦的li之后的所有li标签 然后遍历
		                var tabtitle = $(".layui-tab-title li");
		                element.tabDelete('demo', tableID);
		                $.each(tabtitle, function (i) {
		                    tableID = $(this).attr("lay-id");
		                    element.tabChange('demo',tableID);
		                    return 0;
		                })
		
		            }
		
		
		        });
		
		        //动画左侧导航的收起与打开
		        var widthside = $('#divSide').width();;
		        var widthOrder= $('#sideContent').width();
		        $("#sideTig").click(function () {
		            var $Site = $(this);
		            if ($Site.hasClass('layui-icon-shrink-right')) {
		                $Site.removeClass('layui-icon-shrink-right');
		                $Site.addClass('layui-icon-spread-left');
		                $('#divSide').animate({
		                    width:0
		                });
		
		                $('#sideContent').animate({
		                    width: $('#sideContent').width() + widthside,
		                    left:0
		                });
		
		            } else {
		                $Site.removeClass('layui-icon-spread-left');
		                $Site.addClass('layui-icon-shrink-right');
		                $('#divSide').animate({
		                    width: widthside
		                });
		                $('#sideContent').animate({
		                    width: $('#sideContent').width() - widthside,
		                    left:widthside
		                });
		            }
		        });
		        
		
		    });
		    //
		    //退出系统
		    function OutSystem() {
		        layui.use(["layer"], function () {
		            var layer = layui.layer;
		            api.get("User/api/User/OutSys").then(res=>{
						layer.msg("退出成功");
						//window.open('/admin/Login/Login');
						localStorage.clear()
						location.href = "./login.html";
						window.close(window);
					}).catch(res=>{
						layer.msg("服务器错误")
					})

		        })
		      
		    }
		   
		
		</script>
		
	</body>
</html>
